<template>
    <div class="lx-blog">
      <AppHeader></AppHeader>
      <NuxtLoadingIndicator :height="10" color="blue" />
      <NuxtPage></NuxtPage>
  </div>
</template>


<script setup lang="ts">
const runTimeConfig = useRuntimeConfig();

// 全局脚本
console.log('This is a global script');
console.log('You can access global variables and methods here');
console.log('当前环境变量:', runTimeConfig.public.title);
</script>

<style lang="scss">
  @import '@/assets/scss/main.scss';

.lx-blog {
  min-height: 100vh;
  background-color: var(--lx-page-color);
}

a:hover{
  color: var(--lx-text-color-0);
}
</style>


<style lang="css">
.page-enter-active,.page-leave-active {
    transition: all 0.4s;
  }
  .page-enter-from,.page-leave-to {
    opacity: 0;
    filter: blur(1rem);
  }
  
  .rotate-enter-active,.rotate-leave-active {
    transition: all 0.4s;
  }
  .rotate-enter-from,.rotate-leave-to {
    opacity: 0;
    transform: rotate3d(1, 1, 1, 15deg);
  }
  /* .page-leave-to {
    display: none;
  } */
  .right-enter, .right-leave-to {
      transform: translate3d(0%, 0, 0);
      opacity: 0;
    }
    .right-leave, .right-enter-to {
      transform: translate3d(0, 0, 0);
    }
    .right-enter-active, .right-leave-active {
      transition: all .3s ease-in;
    }

    .fade-enter{
      visibility: hidden;
      opacity: 0;
    }
.fade-leave-to{
  display: none;
}
.fade-enter-active,
.fade-leave-active{
  filter: blur(1rem);
  transition: opacity .1s ease;
}
.fade-enter-to,
.fade-leave{
  visibility: visible;
  opacity: 1;
}

</style>